import AddDiffBtn from '@/components/AddDiffBtn';
import Image from '@/components/Image';
import NoImage from '@/components/NoImage';
import Rate from '@/components/Rate';
import { DiffOutlined, LinkOutlined } from '@ant-design/icons';
import { css } from '@emotion/react';
import { Link, useModel } from '@umijs/max';
import { List, Space, Tag } from 'antd';
import { SpecificationValueType } from 'common/utils/data';
import { completeImgUrl } from 'common/utils/utils';
import { FC, Fragment, memo } from 'react';

interface Top10ItemProps {
  item: API.EQTop10Result;
  index: number;
}

const Top10Item: FC<Top10ItemProps> = (props) => {
  const { item, index } = props;

  const {
    mapData: mapSpecification,
  } = useModel('specification');

  return (
    <Link
      to={{
        pathname: `/evaluation/${item.uuid}`,
      }}
      target="_blank"
    >
      <List.Item
        className='cursor-pointer bg-white p-[16px]'
        actions={[
          <AddDiffBtn key="add-diff" evaluationUuid={item.uuid}>
            <Space className="hover-primary" style={{
              color: 'rgba(0, 0, 0, 0.88)'
            }}>
              <DiffOutlined />
              <span>添加对比</span>
            </Space>
          </AddDiffBtn>,
          <a className="hover-primary" style={{
            color: 'rgba(0, 0, 0, 0.88)'
          }} href={item.buyUrl} target="_blank">
            <Space>
              <LinkOutlined />
              <span>去购买</span>
            </Space>
          </a>
        ]}
        extra={
          item.article.thumbnails?.length ? <Image
            style={{
              width: 272,
              aspectRatio: '2/1',
            }}
            alt={item.article.thumbnails[0]}
            src={completeImgUrl(item.article.thumbnails[0], '?x-oss-process=image/resize,m_fill,w_340,h_170')}
          /> : <NoImage style={{
            width: 272,
            aspectRatio: '2/1',
          }} />
        }
      >
        <List.Item.Meta
          avatar={<span style={({
            0: {
              background: 'linear-gradient(135deg, #FFD700, #FFA500)',
              transform: 'scale(1.1)'
            },
            1: {
              background: 'linear-gradient(135deg, #C0C0C0, #A9A9A9)',
              transform: 'scale(1.05)'
            },
            2: {
              background: 'linear-gradient(135deg, #CD7F32, #A0522D)'
            }
          })[index]} css={css`
             display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            font-weight: bold;
            font-size: 14px;
            `}>{index + 1}</span>}
          title={<div className='flex items-center'>
            {item.title}
            <Tag className='ml-[8px]'>{item.hitEvaluationData.dataGroup} {item.hitEvaluationData.name ? ` - ${item.hitEvaluationData.name}` : ''}</Tag>
          </div>}
        />
        <div className='h-[50px]' css={css`
             &>.ant-tag{
               margin-bottom: 4px;
             }
            `}>
          <Rate.Tag bizUuid={item.uuid} />
          <Tag color="volcano" bordered={false}>{item.brand.title}</Tag>
          {item.price !== null ? <Tag icon={<span>￥</span>} color="var(--primary-color)" bordered={false}>{item.price}</Tag> :
            <Tag color="var(--primary-color)" bordered={false}>价格未公布</Tag>
          }
          {mapSpecification && item.specifications.map(spec => {
            const cur = mapSpecification[spec.specificationUuid];
            if (cur) {
              return <Tag key={spec.uuid}>
                {cur?.name}：{
                  cur.valueType === SpecificationValueType.SELECT ?
                    spec.value.split(';').filter(item => item).map(item => {
                      return cur.extra?.mapOptions?.[item];
                    }).join('、') :
                    spec.value
                }
              </Tag>
            }
            return <Fragment key={spec.uuid} />
          })}
          {item.article.keywords.map(keyword => {
            return <Tag key={keyword}>{keyword}</Tag>
          })}
        </div>
      </List.Item>
    </Link>
  );
};

export default memo(Top10Item);
